<template>
	<view class="">
		<view class="u-content">
			<view style=" width: 50%;">
				<view style="width: 100%; display: flex; justify-content: center;align-items: center;">
					<view class="round">
						<view class="roundn">
							1
						</view>
					</view>
					<view class="progress">

					</view>
				</view>
				<view style="color: #fe7a42;margin-left: -20rpx;">
					房屋地址
				</view>
			</view>
			<view style="width: 50%; display: flex; flex-wrap: wrap; justify-content: flex-end;">
				<view style="width: 100%; display: flex; justify-content: center;align-items: center;">
					<view :class="show ? 'progress2' : 'progress'">
					</view>
					<view :class="show ? 'round2' : 'round'">
						<view :class="show ? 'roundn2' : 'roundn'">
							2
						</view>
					</view>
				</view>
				<view :class="show ? 'displaytext' : 'displaytext2'" style="margin-right: -30rpx;">
					租期及费用
				</view>
			</view>
		</view>
		<!-- 合同类型 -->
		<view class="" v-show="show == true">
			<u--form labelPosition="left" :model="snData" :rules="rules" ref="uForms">
				<h5 class="bttext" style="margin: 25rpx 40rpx;">合同类型</h5>
				<view class="cord">
					<view class="cordht">
						<u-checkbox-group v-model="radiovalue1" placement="column" @change="checkboxChange">
							<u-checkbox  shape="circle" activeColor="#fe4f04" :customStyle="{ marginBottom: '8px' }" v-for="(item, index) in radiolist1"
								:key="index" :label="item.name" :name="item.id">
							</u-checkbox>
						</u-checkbox-group>

					</view>
				</view>
				<h5 class="bttext" style="margin: 25rpx 40rpx;">乙方信息</h5>
				<view class="cord">
					
					<u-form-item ref="item1">
						<view class="flexbox" style="">
							<span style="margin-right:  10rpx">姓名<span style="color: red;">*</span></span>
							<u--input inputAlign="right" v-model="snData.user_name" placeholder="请输入姓名"
								border="none"></u--input>
						</view>
					</u-form-item>
					<u-form-item ref="item1">
						<view class="flexbox" style="">
							<span style="margin-right:  10rpx">身份证号<span style="color: red;">*</span></span>
							<u--input inputAlign="right" v-model="snData.user_card" placeholder="请输入身份证号"
								border="none"></u--input>
						</view>
					</u-form-item>
					<u-form-item ref="item1">
						<view class="flexbox" style="">
							<span style="margin-right:  10rpx">手机号<span style="color: red;">*</span></span>
							<u--input inputAlign="right" v-model="snData.user_phone" placeholder="请输入手机号"
								border="none"></u--input>
						</view>
					</u-form-item>
				</view>
				<view class="cord">
					<u-form-item prop="userInfo.name" ref="item1">
						<view class="flexbox" @click="sexSelect(1)">
							<span style="margin-right:  10rpx">房屋<span style="color: red;">*</span></span>
							<u--input inputAlign="right" v-model="fwtext" disabled disabledColor="#ffffff"
								placeholder="请选择" border="none"></u--input>
							<u-icon name="arrow-right" color="#ccc" size="12"></u-icon>
						</view>
					</u-form-item>
				</view>
				<view class="submitbox" @click="enxt">
					下一步
				</view>
			</u--form>
		</view>

		<!-- 第二页 -->
		<view class="" v-show="show == false">
			<u--form labelPosition="left" :model="model1" :rules="rules" ref="uForm">
				<h5 class="bttext" style="margin: 25rpx 40rpx;">租期信息</h5>
				<view class="cord">
					<u-form-item prop="userInfo.start_time" ref="item1" @click="timeclick(1)">
						<view class="flexbox" style="">
							<span style="margin-right:  10rpx">租期开始时间<span style="color: red;">*</span></span>
							<u--input inputAlign="right" v-model="model1.userInfo.start_time" disabled disabledColor="#ffffff" placeholder="请选择"
								border="none"></u--input>
							<u-icon name="arrow-right" color="#ccc" size="12"></u-icon>
						</view>
					</u-form-item>
					<u-form-item prop="userInfo.end_time" ref="item1" @click="timeclick(2)">
						<view class="flexbox" style="">
							<span style="margin-right:  10rpx">租期截至时间<span style="color: red;">*</span></span>
							<u--input inputAlign="right" v-model="model1.userInfo.end_time" disabled disabledColor="#ffffff" placeholder="请选择"
								border="none"></u--input>
							<u-icon name="arrow-right" color="#ccc" size="12"></u-icon>
						</view>
					</u-form-item>
				</view>
				<h5 class="bttext" style="margin: 25rpx 40rpx;">租金与要押金</h5>
				<view class="cord">
					<u-form-item prop="userInfo.money_zu" ref="item1">
						<view class="flexbox" style="">
							<span style="margin-right:  10rpx">租金<span style="color: red;">*</span></span>
							<u--input inputAlign="right" v-model="model1.userInfo.money_zu" placeholder="请填入"
								border="none"></u--input>
							<span style="margin-left: 10rpx;">元/月</span>
						</view>
					</u-form-item>
					<u-form-item prop="userInfo.pay_time" ref="item1">
						<view class="flexbox" style="">
							<span style="margin-right:  10rpx">支付日期<span style="color: red;">*</span></span>
							<view style="display: flex;justify-content: flex-end; flex: auto;">
								<u--input inputAlign="right" v-model="model1.userInfo.pay_time" placeholder="请填入"
									border="none"></u--input>
							</view>

						</view>
					</u-form-item>
					<u-form-item prop="userInfo.money_ya" ref="item1">
						<view class="flexbox" style="">
							<span style="margin-right:  10rpx">押金<span style="color: red;">*</span></span>
							<u--input inputAlign="right" v-model="model1.userInfo.money_ya" placeholder="请填入"
								border="none"></u--input>
							<span style="margin-left: 10rpx;">元</span>
						</view>
					</u-form-item>
					<u-form-item prop="userInfo.ya_type" ref="item1">
						<view class="flexbox" @click="sexSelect(2)">
							<span style="margin-right:  10rpx">押金类型<span style="color: red;">*</span></span>
							<u--input inputAlign="right" v-model="ya_type" disabled disabledColor="#ffffff" placeholder="请填入"
								border="none"></u--input>
								<u-icon name="arrow-right" color="#ccc" size="12"></u-icon>
						</view>
					</u-form-item>
					<u-form-item prop="userInfo.money_electricity" ref="item1">
						<view class="flexbox" style="">
							<span style="margin-right:  10rpx">电费<span style="color: red;">*</span></span>
							<u--input inputAlign="right" v-model="model1.userInfo.money_electricity" placeholder="请填入"
								border="none"></u--input>
							<span style="margin-left: 10rpx;">元/度</span>
						</view>
					</u-form-item>
					<u-form-item prop="userInfo.money_water" ref="item1">
						<view class="flexbox" style="">
							<span style="margin-right:  10rpx">水费<span style="color: red;">*</span></span>
							<u--input inputAlign="right" v-model="model1.userInfo.money_water" placeholder="请填入"
								border="none"></u--input>
							<span style="margin-left: 10rpx;">元/升</span>
						</view>
					</u-form-item>

				</view>
				<!-- <view class="" style="display: flex; justify-content: space-between; align-items: center;">

					<h5 class="bttext" style="margin: 25rpx 40rpx;">合同附件</h5>
					<u-switch v-model="value" activeColor="#FE4F04"
						style="margin-right: 15rpx;"></u-switch>
				</view>
				<view class="cord">
					<view class="sctext"  v-if="value==false">
						<text style="">暂不上传</text>
					</view>

					<view class="fjimage" v-if="value==true">
						<view class="">
							<u-upload accept=".pdf"  :fileList="fileLis1" @afterRead="afterRead($event,1)" @delete="deletePic(1)" name="6"
									multiple :maxCount="1" width="128rpx" height="128rpx">
									<view>
										<image src="../static/images/tp.png" mode="widthFix"
											style="width: 128rpx;height: 128rpx;"></image>
									</view>
							</u-upload>
						</view>
					</view>
				</view> -->
				<h5 class="bttext" style="margin: 25rpx 40rpx;">合同附件</h5>

				<view class="cord">
					<view class="fjimage">
						<view class="">
							<u-upload :fileList="fileList" @afterRead="afterRead($event,0)" @delete="deletePic(0)" name="6"
									multiple :maxCount="1" width="128rpx" height="128rpx">
									<view>
										<image src="../static/images/tp.png" mode="widthFix"
											style="width: 128rpx;height: 128rpx;"></image>
									</view>
							</u-upload>
							<!-- <image style="width: 128rpx; height: 128rpx;" src="../static/images/home.png" mode=""></image> -->
						</view>
					</view>

				</view>

				<view class="zubmitbox">
					<view class="submitbox-z" @click="show = true">
						上一步
					</view>
					<view class="submitbox-y" @click="submit">
						保存
					</view>
				</view>
			</u--form>
		</view>
		<view style="height: 100rpx;">

		</view>
		<!-- 底部弹出层 -->
		<u-action-sheet :show="showSex" :round="30" :actions="actions" @close="showSex = false"
			@select="Select($event, num)">
		</u-action-sheet>
		<!-- 日期选择 -->
		<uni-calendar ref="calendar" :insert="false" @confirm="datashowclick" />

		<!-- <u-calendar :show="datashow"  :month-num="120"   @close="datashow = false" @confirm="datashowclick"></u-calendar> -->
	</view>
</template>

<script>
import {
	etaillist,
	contractadd,
	getYaTypeList
} from "@/api/landlord"
import { uploadFilePromise } from '../static/js'
export default {
	data() {
		return {
			snData: {
				user_name:'',
				user_card:'',
				user_phone:''
			},
			timenum: 0,
			datashow: false,
			showSex: false,
			show: true,

			// 基本案列数据
			radiolist1: [{
				name: '线下合同',
				id: 1,
				disabled: false
			}],
			value: false,
			// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
			radiovalue1: [1],
			showSex: false,
			ya_type:'',
			fileList:[],
			fileLis1:[],
			model1: {
				userInfo: {
					user_id: '',
					type: 1,
					//房源id
					house_id: '',
					// 开始事件
					start_time: '',
					// 结束时间
					end_time: '',
					// 租金
					money_zu: '',
					// 支付日期
					pay_time: '',
					// 押金
					money_ya: '',
					// 电费
					money_electricity: '',
					// 水费
					money_water: '',
					// 附件
					attachment: '',
					// 蹄片
					photo: '',
					// 押金类型
					ya_type:'',
					// 水表
					water_num: '',
					// 电表
					electricity_num:''
				}
			},
			rules: {
				'userInfo.start_time': {
					type: 'string',
					required: true,
					message: '请选择开始时间',
					trigger: ['blur', 'change']
				},
				'userInfo.ya_type': {
					type: 'number',
					required: true,
					message: '请选择押金类型',
					trigger: ['blur', 'change']
				},
				'userInfo.end_time': {
					type: 'string',
					required: true,
					message: '请选择结束时间',
					trigger: ['blur', 'change']
				},
				'userInfo.money_zu': {
					type: 'string',
					required: true,
					message: '请输入租金',
					trigger: ['blur', 'change']
				},
				'userInfo.pay_time': {
					type: 'string',
				
					required: true,
					message: '请输入支付日期',
					trigger: ['blur', 'change']
				},
				'userInfo.money_ya': {
					type: 'string',
				
					required: true,
					message: '请输入押金',
					trigger: ['blur', 'change']
				},
				'userInfo.money_electricity': {
					type: 'string',
				
					required: true,
					message: '请输入电费',
					trigger: ['blur', 'change']
				},
				'userInfo.money_water': {
					type: 'string',
			
					required: true,
					message: '请输入水费',
					trigger: ['blur', 'change']
				},
			},
			actions: [
			],
			num:0,
			fwtext: '',
			radio: '',
			switchVal: false
		};
	},

	onLoad(options) {
		// this.init()
		console.log(8888);
		if (options) {
			let data = JSON.parse(options.data)		
			// this.snData = JSON.parse(options.data)
			this.model1.userInfo.user_id = data.user_id;
			console.log(this.snData);
		}
	},

	methods: {
		// 删除
		deletePic(e) {
			if(e==0) {
				this['fileList'].splice(0, 1);
			}else if(e==1){
				this['fileLis1'].splice(0, 1);
			}
		
		},
			// 回显上传本地图片
		async afterRead(event,k) {
			// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
			const item = event.file[0];
			// 获取本地读取文件路径
			const url = item.url;
			//result为上传成功的响应数据
			let result = await uploadFilePromise(url);

			if(k==0) {
				this['fileList'].push({
				...item,
				//提示上传中
				status: 'success',
				message: '上传成功',
				urls: result.url
				});
			}else if(k==1) {
				console.log(666,result);
				this.fileLis1.push({
					...item,
				//提示上传中
				status: 'success',
				message: '上传成功',
				urls: result.url
				})
				console.log(this.fileLis1);
				
			}
		},
		enxt() {
			if (this.snData.user_name=='') {
				uni.$u.toast('请输入姓名')
				return
			}
			if (this.snData.user_card=='') {
				uni.$u.toast('请输入身份证号')
				return
			}
			if (this.snData.user_phone=='') {
				uni.$u.toast('请输入手机号')
				return
			}
			// this.$refs.uForms.validate().then(res => {
			// 	uni.$u.toast('校验通过')
				
				
			// }).catch(errors => {
			// 	console.log(errors);
				
			// 	uni.$u.toast('校验失败')
			// })
			if (this.model1.userInfo.house_id == '') {
				return this.$u.toast('请选择房屋')
			}
			this.show = false
		},
		Select(e,k) {
			// 房屋
			if (k==1) {
				this.model1.userInfo.house_id = e.id;
				this.fwtext = e.name;
			}else if (k==2) {
				console.log(e);
				
				this.model1.userInfo.ya_type = e.id;
				this.ya_type = e.name;
			}

	
		},
		sexSelect(e) {
			this.num=e
			if (e==1) {
				etaillist({
				type: 3,
				page: 1,
				page_size: 100
			}).then((res) => {
				console.log(res.data.data.data);
				let list = []
				res.data.data.data.forEach(e => {
					list.push({
						id: e.id,
						name: e.name
					})
				});
				this.actions = list
				this.showSex = true;
			})
			}else if (e==2) {
				getYaTypeList({}).then(res=>{
					console.log(res.data.data);
					let list = []
					list = Object.entries(res.data.data).map(([key, value]) => {
					return {
						id: parseInt(key),
						name: value
					};
					});
					console.log(list);
					this.actions=list
					this.showSex = true;
				})
			}
		
		},
		submit() {
			this.$refs.uForm.validate().then(res => {
				// uni.$u.toast('校验通过')
				
				if (this.fileList.length == 0) {
					uni.$u.toast('请上传合同照片')
					return
				}else{
					this.fileList.forEach(e => {
						
						this.model1.userInfo.photo = e.urls
					});
				}
				// if (this.value == true && this.fileLis1.length == 0) {
				// 	uni.$u.toast('请上传附件')
				// 	return
				// }else if (this.value == true && this.fileLis1.length !=0) {
				// 	this.fileLis1.forEach(e => {
				// 		console.log(e);
				// 		this.model1.userInfo.attachment = e.urls
				// 	});
				// }
				let data = {...this.model1.userInfo,...this.snData}
				contractadd(data).then(res => {
						uni.$u.toast(res.data.msg)
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 1000)
					
					})
			}).catch(errors => {
				console.log(errors);
				
				uni.$u.toast('校验失败')
			})
		},
		timeclick(e) {
			// 打开时间弹窗
			this.timenum = e
			// this.datashow = true
			this.$refs.calendar.open();
		},
		datashowclick(e) {
			// 时间选择回调
			console.log(e);
			if (this.timenum == 1) {
				this.model1.userInfo.start_time = e.fulldate

			} else if (this.timenum == 2) {
				this.model1.userInfo.end_time = e.fulldate
			}
			this.datashow = false
		},
		checkboxChange(n) {
			console.log(n);
			if (n.length==0) {
				this.model1.userInfo.type=0
			}else{
				n.forEach(e => {
					this.model1.userInfo.type=e
				});
			}
		},
	
	},
	onReady() {
		//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
		this.$refs.uForm.setRules(this.rules)
		this.$refs.uForms.setRules(this.rules)
	},
};
</script>

<style lang="scss" scoped>
.cord {
	width: 95%;
	margin: 30rpx auto;
	box-sizing: border-box;
	padding: 15rpx;
	background: #fff;
	border-radius: 15rpx;

}

.fjimage {
	display: flex;
	min-height: 170rpx;
	align-items: center;
}

.bttext {
	font-family: PingFangSC, PingFang SC;
	font-weight: 500;
	font-size: 26rpx;
	color: #2A0C00;
}

.sctext {
	height: 100rpx;
	font-family: PingFangSC, PingFang SC;
	font-weight: 400;
	font-size: 28rpx;
	color: #999999;
	display: flex;
	align-items: center;
	padding: 0 20rpx;
}

.cordht {
	height: 100rpx;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	padding: 0 20rpx;
	font-size: 28rpx;
}

.displaytext {
	display: flex;
	justify-content: end;
	color: #b1b1b1;
}

.displaytext2 {
	display: flex;
	justify-content: end;
	color: #fe7a42;
}

.zubmitbox {
	width: 100%;
	display: flex;
	justify-content: center;

	.submitbox-z {
		margin: 0 5rpx;
		width: 45%;
		border-radius: 50rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100rpx;
		color: #fe4f04;
		border: 1rpx solid #fd5f1c;
		// background-color: #fe4f04;
	}

	.submitbox-y {
		width: 45%;
		margin: 0 5rpx;
		border-radius: 50rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100rpx;
		color: #fff;
		background-color: #fe4f04;
	}
}

.submitbox {
	width: 95%;
	margin: 0 auto;
	border-radius: 50rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100rpx;
	color: #fff;
	background-color: #fe4f04;
}

.flexbox {
	border-radius: 10rpx;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	padding: 0 10rpx;
	width: 100%;
	height: 80rpx;
}

.progress {
	flex: auto;
	height: 12rpx;
	// border: 1rpx solid red;
	display: flex;
	// margin-top: 10rpx;
	background-color: #fe4f04;

}

.progress2 {
	flex: auto;
	height: 12rpx;
	// border: 1rpx solid red;
	display: flex;
	// margin-top: 10rpx;
	background-color: #f8f6fb;

}

.u-content {
	box-sizing: border-box;
	border-radius: 20rpx;
	padding: 30rpx 80rpx;
	font-size: 24rpx;
	color: #333;
	width: 95%;
	margin: 0 auto;
	// height: 100rpx;
	display: flex;
	justify-content: space-between;
	z-index: 3;
	position: relative;
	background: linear-gradient(180deg, #FFF5F1 0%, rgba(255, 255, 255, 0.9) 100%);
	box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(53, 110, 253, 0.05);
	border-radius: 32rpx;
	border: 2rpx solid #FFFFFF;
	margin-top: 40rpx;
}

.round {
	border-radius: 50%;
	width: 60rpx;
	height: 60rpx;
	background-color: #ffeee6;
	display: flex;
	// margin-left: 15rpx;
	justify-content: center;
	align-items: center;

	.roundn {
		border-radius: 50%;
		width: 40rpx;
		height: 40rpx;
		background-color: #fe4f04;
		display: flex;
		justify-content: center;
		color: #fff;
		align-items: center;
	}
}

.round2 {
	border-radius: 50%;
	width: 60rpx;
	height: 60rpx;
	background-color: #f1edec;
	display: flex;
	justify-content: center;
	align-items: center;
	// margin-left: 15rpx;

	.roundn2 {
		border-radius: 50%;
		width: 40rpx;
		height: 40rpx;
		background-color: #a38980;
		display: flex;
		justify-content: center;
		color: #fff;
		align-items: center;
	}
}
</style>